import React, { useState, useEffect } from "react";
import { Form, Select, Input, TimePicker, Radio, Row, Col } from 'antd';
const { Option } = Select;

import TravelCont from './TravelContView';

function Travel() {
    let data = {
        trip_time: '',
        trip_type: 1,
        hotel_in_city: '',
        hotel_name: '',
        hotel_level: '',
        scenic_name: '',
        scenic_active_time: '',
        dining_type: '',
        dining_is_contain: '',
        dining_special_instruction: '',
        shopping_title: '',
        shopping_active_time: '',
        free_active_title: '',
        free_active_time: '',
        own_title: '',
        own_active_time: '',
        other_title: '',
        other_active_time: '',
        today_profile: '',
        has_detail_description: 0,
        detail_description: '',
        description_image: {},
        sub_scenic:[],
        sub_shopping:[]
    };
    let [ trip, setTrip ] = useState(data);

    useEffect(() => {
        console.log('行程>>render====')
    });

    const type = [{ label: '酒店住宿' }, { label: '景点' }, { label: '餐饮' }, { label: '购物' }, { label: '自由活动' }, { label: '自费项目' }, { label: '其他' }, { label: '今日亮点' } ];

    let onChange = (k, v) => {
        setTrip({ ...trip, [k]: v });
        console.log(trip)
    };
    return (
        <div className="trip-info-box">
            <Form.Item
                label="行程时间"
                labelCol={{ span: 4 }}
            >
                <TimePicker format={'HH:mm'} value={trip.trip_time} onChange={(v) => onChange('trip_time', v)} />
            </Form.Item>
            <Form.Item
                label="类型"
                labelCol={{ span: 4 }}
            >
                <Select
                    style={{ width: 200 }}
                    placeholder="请选择"
                    value={trip.trip_type}
                    onChange={(v) => onChange('trip_type', v)}
                >
                    {
                        type.map((item, i) => (<Option key={i} value={++i}>{item.label}</Option>))
                    }
                </Select>
            </Form.Item>
            <TravelCont prop={trip} onChange={onChange}/>
        </div>
    );
};

export default React.memo(Travel);